<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧养老服务平台 - 健康数据精准呈现</title>
  <link rel="stylesheet" href="../css/主界面.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <style>
  </style>
</head>

<body>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="nav-container">
        <a href="#" class="logo" @click.prevent="goHome">
          <i class="fas fa-heartbeat logo-icon"></i>
          <div class="logo-text">智慧<span>养老</span>平台</div>
        </a>
        <nav class="nav-links">
          <a href="#" class="nav-link" :class="{'active': currentPage === 'home'}" @click.prevent="goHome">
            <i class="fas fa-home"></i>
            首页概览
          </a>
          <a href="#" class="nav-link" :class="{'active': currentPage === 'health'}" @click.prevent="goHealth">
            <i class="fas fa-user-injured"></i>
            健康数据
          </a>
          <a href="#" class="nav-link" @click.prevent="showLocation">
            <i class="fas fa-map-marker-alt"></i>
            一键定位
          </a>
          <a href="#" class="nav-link" @click.prevent="showService">
            <i class="fas fa-concierge-bell"></i>
            预约服务
          </a>
          <a href="#" class="nav-link" @click.prevent="showEmergency">
            <i class="fas fa-first-aid"></i>
            紧急求助
          </a>
        </nav>
      </div>
    </header>

    <!-- 首页内容 -->
    <main class="container" v-if="currentPage === 'home'">
      <div class="home-page fade-in">
        <section class="hero">
          <div class="hero-content">
            <div class="hero-text">
              <h1 class="hero-title">
                智慧养老服务平台
                <span>让每位老人安享晚年</span>
              </h1>
              <p class="hero-description">
                运用物联网、云计算和人工智能技术，为老年人提供全面的健康监测、安全防护、生活服务和情感关怀，打造"安心、舒心、开心"的养老生活
              </p>

              <!-- 数据统计区域 -->
              <div class="stats-container fade-in" style="animation-delay: 0.2s">
                <div class="stat-card">
                  <i class="fas fa-users stat-icon"></i>
                  <div class="stat-number">2800</div>
                  <div class="stat-title">服务人群覆盖</div>
                  <div class="stat-unit">万人</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-hands-helping stat-icon"></i>
                  <div class="stat-number">100</div>
                  <div class="stat-title">养老指挥中心</div>
                  <div class="stat-unit">个</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-concierge-bell stat-icon"></i>
                  <div class="stat-number">5</div>
                  <div class="stat-title">每日服务次数</div>
                  <div class="stat-unit">万次</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-heartbeat stat-icon"></i>
                  <div class="stat-number">30</div>
                  <div class="stat-title">每日救助老人</div>
                  <div class="stat-unit">位</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-map-marked-alt stat-icon"></i>
                  <div class="stat-number">218</div>
                  <div class="stat-title">服务覆盖区县</div>
                  <div class="stat-unit">个</div>
                </div>
              </div>
            </div>

            <!-- 老年夫妇照片区域 -->
            <div class="elder-photo">
              <div class="elder-photo-placeholder">
                <i class="fas fa-user-friends"></i>
                <h3>智慧养老实践者</h3>
                <p>我们致力于为每一位老人提供贴心服务</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 底部标语 -->
        <footer class="footer fade-in" style="animation-delay: 0.3s">
          <div class="platform-slogan">"老人离不开的生活服务平台"</div>
          <div class="slogan-sub">全天候健康监测 · 一键紧急求助 · 智能定位服务 · 专业医疗照护</div>
        </footer>
      </div>
    </main>
    </script>
</body>